import Svg,{
  Circle,
  Ellipse,
  G,
  Text,
  TSpan,
  TextPath,
  Path,
  Polygon,
  Polyline,
  Line,
  Rect,
  Use,
  Image,
  Symbol,
  Defs,
  LinearGradient,
  RadialGradient,
  Stop,
  ClipPath,
  Pattern,
  Mask,
} from 'react-native-svg';

/* Use this if you are using Expo
import { Svg } from 'expo';
const { Circle, Rect } = Svg;
*/

import React from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';

// Percentages work in plain react-native but aren't supported in Expo yet, workaround with this or onLayout
const { width, height } = Dimensions.get('window');

export default class SvgExample16 extends React.Component {


  render() {
    return (
      <View style={{...StyleSheet.absoluteFill,alignItems: 'center', justifyContent: 'center' }}>
        <Svg
          height="150"
          width="300"
        >
          <Defs>
            <RadialGradient id="grad" cx="150" cy="75" rx="85" ry="55" fx="150" fy="75" gradientUnits="userSpaceOnUse">
              <Stop
                offset="0"
                stopColor="#ff0"
                stopOpacity="1"
              />
              <Stop
                offset="1"
                stopColor="#83a"
                stopOpacity="1"
              />
            </RadialGradient>
          </Defs>
          <Ellipse cx="150" cy="75" rx="85" ry="55" fill="url(#grad)" />
        </Svg>
      </View>
    );
  }
}